.datepicker {
	box-sizing: content-box;
	height: 270px;
	background-color: #fff;
	border: 1px solid #EBEDF7;
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,.1);
	.clearafter();
	.canlendar {
		//display: inline-block;
		float: left;
		height: 100%;
		padding: 4px;
		border-left: 1px solid #f7f7f7;
		&:nth-child(1) {
			border-left: 1px solid #fff;
		}
		.canlendarTitle {
			position: relative;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			.btn {
				&.dateTitle {
					text-align: center;
					display: block;
				}
				&.prev {
					position: absolute;
					left: 0;
					top: 0;
					&:before {
						font-family:terminal;
						content: '<';
					}
				}
				&.next {
					position: absolute;
					right: 0;
					top: 0;
					&:before {
						font-family:terminal;
						content: '>';
					}
				}
			}
		}
		.canlendarContent{
			.canlendarTable {
				position: relative;
				display: block;
				.clearafter();
				.thead,
				.tbody,
				.tr{
					display: block;
					.clearafter();
				}
				.thead {
					.th {
						float: left;
						font-size: 12px;
						line-height: 36px;
						//color: #818E9B;
					}
				}

				.td {
					position: relative;
					float: left;
					text-align: center;
					//position: absolute;
				}

				&.date {
					.tr {
						.td {
							.dayNumber {
								position: absolute;
								width: 24px;
								height: 24px;
								left: 50%;
								top: 50%;
								margin-left: -12px;
								margin-top: -12px;
								//border-radius: 50%;
								text-align: center;
								line-height: 24px;
							}
							.dayNumber {
								color: #818e9b;
							}
							&.today {
								.dayNumber {
									position: relative;
									//background-color: #f3b414;
									//color: #fff;
									&:after{
										content: "";
										position: absolute;
										display: block;
										width: 6px;
										height: 6px;
										left: 50%;
										top: 3px;
										margin-left: 6px;
										background-color: #30ba78;
										border-radius: 50%;
									}
								}
							}
							&.inRange{
								.dayNumber {
									width: 100%;
									left: 0;
									margin-left: 0;
									border-radius: 0;
									background-color: #efefef;
									color: #30BA78;
									font-weight: bold;
								}
							}
							&.disabled,
							&.disabled:hover {
								.dayNumber {
									background-color: transparent;
									color: #f5f5f5;
									cursor: not-allowed;
								}
							}
							&:hover {
								.dayNumber {
									//background-color: #eee;
									color: #30ba78;
								}
							}
							&.checked {
								.dayNumber {
									background-color: #efefef;
									color: #30BA78;
									font-weight: bold;
									//color: #fff;
								}
							}
						}
					}
				}
				&.year{
					.thead{
						height: 20px;
					}
					.td{
						position: relative;
						.yearNumber {
							position: absolute;
							width: 100%;
							height: 24px;
							left: 0;
							top: 50%;
							margin-top: -12px;
							border-radius: 50%;
							text-align: center;
							line-height: 24px;
						}
					}
				}
				&.month{
					.td{
						position: relative;
						.monthNumber {
							position: absolute;
							width: 100%;
							height: 24px;
							left: 0;
							top: 50%;
							margin-top: -12px;
							border-radius: 50%;
							text-align: center;
							line-height: 24px;
						}
					}
				}
			}
		}
	}

}
